<template>
  <div class="category-swiper" v-if="swiper && swiper.length > 0">
    <cube-slide
      :data="swiper"
      :speed="800"
      :interval="interval"
      class="swiper"
    >
      <cube-slide-item
        v-for="(item, index) in swiper"
        :key="index"
        @click.native="handleClick(item)"
        class="item"
      >
        <delay :timeout="10/1000">
          <img v-lazy="item.image.thumbnail_path" v-if="item.image && item.image.thumbnail_path" />
        </delay>
      </cube-slide-item>
    </cube-slide>
  </div>
</template>

<script>
import Delay from '@/components/Delay'
export default {
  props: ['swiper'],
  components: {
    Delay
  },
  data() {
    return {
      interval: 3000
    }
  },
  methods: {
    handleClick(item) {
      const url = item.url
      if (url.length > 0) {
        this.$router.push(url)
      }
    }
  }
}
</script>

<style scoped lang="stylus">
.category-swiper
  height 105px
  border-radius 10px
  //margin 10px
  .swiper
    border-radius 10px
    .item
      //display flex
      //align-items center
      img
        width 100%
        height 100%

</style>
